<GhBasicDropdown @verticalPosition="below" as |dd|>
    <dd.Trigger class="gh-btn gh-btn-icon gh-btn-action-icon">
        <span class={{if (or @excludedEvents @excludedResources) "gh-btn-label-green"}}>
            {{svg-jar "filter"}}
            Filter events
        </span>
    </dd.Trigger>

    <dd.Content class="gh-activity-log-actions dropdown-menu dropdown-triangle-top-right">
        {{!-- NOTE: re-using ember-power-select-options styles --}}
        <ul class="ember-power-select-options" role="listbox">
            {{#each this.eventTypes as |type idx|}}
                <li class="form-group ember-power-select-option gh-history-filter-li">
                    <div class="gh-activity-log-action-switch for-switch small">
                        <label
                            class="switch"
                            for="event-type-{{idx}}"
                        >
                            <div class="flex items-center">
                                {{svg-jar type.icon}}
                                <span>{{type.name}}</span>
                            </div>
                            <input
                                type="checkbox"
                                checked={{type.isSelected}}
                                id="event-type-{{idx}}"
                                name="eventTypes"
                                {{on "input" (fn this.toggleEventType type.event)}}
                            >
                            <span class="input-toggle-component"></span>
                        </label>
                    </div>
                </li>
            {{/each}}
            <hr />
            {{#each this.resourceTypes as |type idx|}}
                <li class="form-group ember-power-select-option gh-history-filter-li">
                    {{!-- <div class="flex items-center">
                        {{svg-jar "pen"}}
                    </div> --}}
                    <div class="gh-activity-log-action-switch for-switch small">
                        <label
                            class="switch"
                            for="resource-type-{{idx}}"
                        >
                            <div class="flex items-center">
                                {{svg-jar type.icon}}
                                <span>{{type.name}}</span>
                            </div>
                            <input
                                type="checkbox"
                                checked={{type.isSelected}}
                                id="resource-type-{{idx}}"
                                name="eventTypes"
                                {{on "input" (fn this.toggleResourceType type.targets)}}
                            >
                            <span class="input-toggle-component"></span>
                        </label>
                    </div>
                </li>
            {{/each}}
        </ul>
    </dd.Content>
</GhBasicDropdown>